<template>
	<view class="wrap">
		<view class="circle_wrap">
			<view class="circle_line"></view>
		</view>
		<view>
			<u-button type="primary" size="medium" @click="toTest">调用硬件</u-button>
		</view>
		
		<view class="container">
			<view class="list_content" v-for="(item, index) in timer" :key="index">		
				<u-checkbox
					v-model="item.checked"
					:name="item.name"
				></u-checkbox>
				<text>{{item.name}}</text>
			</view>		
		</view>
		<u-button type="primary" @click="search">查询</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			toTest() {
				uni.navigateTo({
					url: '/pages/test/test'
				})
			},
			
			search() {
				let saveTime = []
				this.timer.forEach((item) => {
					if(item.checked) {
						saveTime.push(item.name)
					}
				})
				// 校验
				console.log(saveTime)
				if(this.checkData(saveTime)) {
					return uni.showToast({
						icon: 'none',
						title: '成功'
					})
				} else {
					return uni.showToast({
						icon: 'none',
						title: '请检查连续性'
					})
				}
			},
			
			// 检查数组连续性
			checkData(array) {
				if(!array){
					//数组为null
					return false;
				}
				if(array.length==0){
					//数组为[]
					return true;
				}
				var len=array.length;
				var n0=array[0];
				var sortDirection=1;//默认升序
				if(array[0]>array[len-1]){
					//降序
					sortDirection=-1;
				}
				if((n0*1+(len-1)*sortDirection)!==array[len-1]){
					return false;
				}
				var isContinuation=true;
				for(var i=0;i<len;i++){
					if(array[i]!==(i+n0*sortDirection)){
						isContinuation=false;
						break;
					}
				}
				return isContinuation;
			},
			
			init() {
				let num = 25
				let obj = {}
				for(let i = 0; i < num; i++) {
					obj = {
						name: i,
						checked: false
					}					
					this.timer.push(obj)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		margin-top: 120rpx;
	}
	
	.container {
		display: flex;
		flex-wrap: wrap;
		.list_content {
			width: 11%;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
		}
	}
	
	.circle_wrap {
		position: fixed;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%);
		margin-top: 80rpx;
		.circle_line {
			width: 100rpx;
			height: 100rpx;
			background: orange;
			border-radius: 80rpx;
			animation: myCircle 3s infinite;
		}
	}
	
	@keyframes myCircle
	{
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.5);
			opacity: 0.5;
		}
		100% {
			transform: scale(2);
			opacity: 0.1;
		}
	}
</style>
